<template>
    <div>
        <div class="tags-panel">
            <div class="tags-panelList clear">
            <div class="tags-panelSpan">品牌：</div>
                <ul class="tags">
                    <li  v-for="(item,index) in 22" :key="index" :class="{ active:index==isActive }" @click="changeValue(index)">全部</li>
                </ul>
            </div>
            <div class="tags-panelList clear">
            <div class="tags-panelSpan">行政区：</div>
                <ul class="tags">
                    <li v-for="(item,index) in 22" :key="item" :class="{ active:index==isAdministrative }" @click="Administrative(index)">全部</li>
                </ul>
            </div>
            <div class="tags-panelList clear">
            <div class="tags-panelSpan">特殊厅：</div>
                <ul class="tags">
                    <li v-for="(item,index) in 22" :key="item" :class="{ active:index==isSpecial }" @click="Special(index)">全部</li>
                </ul>
            </div>
            <div class="tags-panelList clear">
            <div class="tags-panelSpan">服务：</div>
                <ul class="tags">
                    <li v-for="(item,index) in 4"  :key="item" :class="{ active:index==isService }" @click="Service(index)">全部</li>
                </ul>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.tags-panel{
    width: 1080px;

    border: 1px solid #e5e5e5;
    padding: 0 20px;
    margin: 0 auto;
    margin-top: 40px;
    
    .tags-panelSpan{
        height: 24px;
        line-height: 24px;
        float: left;
        color: #999;
        font-size: 14px;
    }
    .tags-panelList{
        padding: 10px 0;
        border-bottom: 1px dotted #e5e5e5;
        .tags{
            float: left;
            width: 1000px;
                li{
                    color: #333;
                    font-size: 14px;
                    padding: 3px 9px;
                    display: inline-block;
                    margin-left: 12px;
                }
                .active{
                    background: #f34d41 !important;
                    color: #fff !important;
                    border-radius: 14px !important;
                }
            }
        .tags li:hover{
            color: #ef4238;
        }
        }
        div:nth-child(4){
            border: 0;
        }
    }
</style>
<script>
export default {
    data() {
        return {
        isActive:false,
        isAdministrative:false,
        isSpecial:false,
        isService:false,
        }
    },
    methods:{
         changeValue(index, item){
       this.isActive=index;
        console.log(item);
    },
         Administrative(index, item){
       this.isAdministrative=index;
        console.log(item);
    },
         Special(index, item){
       this.isSpecial=index;
        console.log(item);
    },
         Service(index, item){
       this.isService=index;
        console.log(item);
    },
    }
}
</script>